
<template>
    <div class="chart-container">
        <h3 class="chart-title">全国各省销售额排名</h3>
        <div class="hbar-chart"></div>
    </div>
</template>

<script setup>

import {  onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

import axios from 'axios'

let chartInstance = null;

let provincesByAmount=[];
let intervalId = null;


let totalAmount =0;



       // 自定义颜色主题
        const colors = [
            '#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#6F5EF9',
            '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3',
            '#36CBCB', '#8E82FE', '#FF9945', '#2EC7C9', '#B6A2DE',
            '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3', '#E5CF0D',
            '#97B552', '#95706D', '#DC69AA', '#07A2A4', '#9A7FD1',
            '#588DD5', '#F5994E', '#C05050', '#59678C', '#C9AB00',
            '#7EB00A', '#6F5553', '#C14089', '#79A065', '#6182B8'
        ];

const getData = (params, url) => {
    return axios.get(url, {
        params: params
    });
}

const fetchData = () => {
    getData(null, 'http://localhost:8088/ordersAnalysis/getList').then((res) => {
        let ordersList = res.data.data;
        // 按总金额降序排序
        const sortedByAmount = ordersList.sort((a, b) => a.totalAmount - b.totalAmount);
        // 省份名称列表
        provincesByAmount = sortedByAmount.map(item => item.province);
        // 总金额数据
        totalAmount = sortedByAmount.map(item => item.totalAmount);
        initChart();
    });
}

onMounted(() => {
     fetchData();
    intervalId = setInterval(fetchData, 5000);
    window.addEventListener('resize', resizeChart);
    
});


onBeforeUnmount(() => {
     clearInterval(intervalId);
    window.removeEventListener('resize', resizeChart);
    if (chartInstance) {
        chartInstance.dispose();
    }
});


const initChart = () => {

     if (!chartInstance) {
        // 第一次调用时初始化实例
        chartInstance = echarts.init(document.querySelector('.hbar-chart'));
    }
 // 总金额图表配置
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    const param = params[0];
                    return `${param.name}<br/>总金额: ${param.value.toLocaleString('zh-CN', {style: 'currency', currency: 'CNY'})}`;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                axisLabel: {
                    formatter: function(value) {
                        if (value >= 10000) {
                            return (value / 10000) + '万';
                        }
                        return value;
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: provincesByAmount,
                axisLabel: {
                    interval: 0,
                    rotate: 0,
                    margin: 10,
                    fontSize: 11
                }
            },
            series: [{
                name: '总金额',
                type: 'bar',
                data: totalAmount,
                itemStyle: {
                    color: function(params) {
                        return colors[params.dataIndex];
                    }
                },
                label: {
                    show: true,
                    position: 'right',
                    formatter: function(params) {
                        if (params.value >= 10000) {
                            return (params.value / 10000).toFixed(2) + '万';
                        }
                        return params.value;
                    }
                },
                barWidth: 20
            }]
        };
    

    chartInstance.setOption(option);
};

const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};


</script>


<style scoped>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .chart-container {
        width: 100%;
        height: 100vh; /* 使用视口高度确保有明确的高度 */
        background: rgba(235, 236, 237, 0.5);
        border: 1px solid #2a7dc9;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(42, 125, 201, 0.3);
    }


    .chart-title {
        color: #fff;
        padding: 10px;
        margin: 0;
        font-size: 16px;
        background: linear-gradient(to right, rgba(6, 12, 23, 0.8), rgba(42, 125, 201, 0.5), rgba(6, 12, 23, 0.8));
        border-bottom: 1px solid #2a7dc9;
    }

/*  */

    .hbar-chart {
        width: 100%;
        height: calc(100% - 36px); /* 减去标题的高度 */
    }

</style>
